<template>
  <C_Layout
    :notification-count="notificationCount"
    @user-click="handleUserClick"
    @notification-click="handleNotificationClick"
    @settings-click="handleSettingsClick"
    @tab-change="handleTabChange"
  >
    <view class="robot-content p-4">
      <!-- 页面标题 -->
      <view class="page-header mb-6">
        <view class="header-card p-4 bg-gradient-to-r from-purple-500 to-blue-600 rounded-xl text-white">
          <view class="flex items-center mb-2">
            <C_Icon name="i-mdi-robot" :size="32" color="white" />
            <text class="ml-3 text-lg font-bold">机器人演示管理中心</text>
          </view>
          <text class="text-sm opacity-90">
            管理配置你的演示机器人，查看各种功能模块示例
          </text>
        </view>
      </view>

      <!-- 管理功能 -->
      <view class="management-section">
        <view class="section-title mb-4 text-lg font-bold text-gray-800 text-center">
          🤖 机器人演示模块管理中心
        </view>
        
        <view class="actions-grid">
          <!-- 组件管理 -->
          <view class="action-card glass-card" @click="navigateToComponents">
            <view class="card-decoration blue-decoration"></view>
            <view class="card-content">
              <view class="card-icon glass-icon blue-bg">
                <C_Icon name="i-mdi-package-variant" :size="24" color="white" />
              </view>
              <text class="card-title">组件管理</text>
              <text class="card-desc">查看所有组件演示</text>
            </view>
            <view class="card-more">
              <text class="more-text">more</text>
              <C_Icon name="i-mdi-dots-horizontal" :size="14" color="#409eff" />
            </view>
          </view>

          <!-- 插件管理 -->
          <view class="action-card glass-card" @click="navigateToPlugins">
            <view class="card-decoration green-decoration"></view>
            <view class="card-content">
              <view class="card-icon glass-icon green-bg">
                <C_Icon name="i-mdi-puzzle" :size="24" color="white" />
              </view>
              <text class="card-title">插件管理</text>
              <text class="card-desc">管理系统插件</text>
            </view>
            <view class="card-more">
              <text class="more-text">more</text>
              <C_Icon name="i-mdi-dots-horizontal" :size="14" color="#67c23a" />
            </view>
          </view>

          <!-- 模板管理 -->
          <view class="action-card glass-card" @click="navigateToTemplates">
            <view class="card-decoration purple-decoration"></view>
            <view class="card-content">
              <view class="card-icon glass-icon purple-bg">
                <C_Icon name="i-mdi-file-document-multiple" :size="24" color="white" />
              </view>
              <text class="card-title">模板管理</text>
              <text class="card-desc">管理页面模板</text>
            </view>
            <view class="card-more">
              <text class="more-text">more</text>
              <C_Icon name="i-mdi-dots-horizontal" :size="14" color="#9c88ff" />
            </view>
          </view>

          <!-- 系统管理 -->
          <view class="action-card glass-card" @click="navigateToSystem">
            <view class="card-decoration orange-decoration"></view>
            <view class="card-content">
              <view class="card-icon glass-icon orange-bg">
                <C_Icon name="i-mdi-cog" :size="24" color="white" />
              </view>
              <text class="card-title">系统管理</text>
              <text class="card-desc">系统配置和设置</text>
            </view>
            <view class="card-more">
              <text class="more-text">more</text>
              <C_Icon name="i-mdi-dots-horizontal" :size="14" color="#f59e0b" />
            </view>
          </view>
        </view>
      </view>
    </view>
  </C_Layout>
</template>

<script setup>
import { ref } from 'vue'

const notificationCount = ref(0)

// 事件处理
const handleUserClick = () => uni.showToast({ title: '查看用户资料', icon: 'none' })
const handleNotificationClick = () => uni.showToast({ title: '查看通知', icon: 'none' })
const handleSettingsClick = () => uni.showToast({ title: '打开设置', icon: 'none' })
const handleTabChange = ({ item, index }) => console.log('切换标签:', item.text, index)

// 导航功能
const navigateToComponents = () => {
  uni.navigateTo({ url: '/pages/demo/component-manage/index' })
}

const navigateToPlugins = () => {
  uni.showModal({
    title: '即将推出',
    content: '插件管理功能正在开发中，敬请期待！',
    showCancel: false,
    confirmText: '知道了'
  })
}

const navigateToTemplates = () => {
  uni.showModal({
    title: '即将推出', 
    content: '模板管理功能正在开发中，敬请期待！',
    showCancel: false,
    confirmText: '知道了'
  })
}

const navigateToSystem = () => {
  uni.showModal({
    title: '即将推出',
    content: '系统管理功能正在开发中，敬请期待！', 
    showCancel: false,
    confirmText: '知道了'
  })
}
</script>

<style lang="scss" scoped>
.robot-content {
  background: #f8fafc;
  min-height: 100vh;
}

.header-card {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border: none;
}

.management-section {
  .section-title {
    font-weight: 700;
  }
}

.actions-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

// 玻璃卡片效果
.glass-card {
  background: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.6);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
  border-radius: 16px;
  transition: all 0.3s ease;

  &:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
    background: rgba(255, 255, 255, 0.9);
  }
}

.action-card {
  padding: 0;
  display: flex;
  flex-direction: column;
  cursor: pointer;
  min-height: 140px;
  position: relative;
  overflow: hidden;
}

// 头部渐变装饰条
.card-decoration {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  border-radius: 16px 16px 0 0;
  transition: all 0.3s ease;
}

.blue-decoration {
  background: linear-gradient(90deg, #409eff 0%, #667eea 100%);
}

.green-decoration {
  background: linear-gradient(90deg, #67c23a 0%, #4facfe 100%);
}

.purple-decoration {
  background: linear-gradient(90deg, #9c88ff 0%, #a8edea 100%);
}

.orange-decoration {
  background: linear-gradient(90deg, #f59e0b 0%, #ff9a9e 100%);
}

.action-card:hover .card-decoration {
  height: 6px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

// 卡片内容区域
.card-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 16px 20px 0;
  justify-content: center;
}

// 玻璃图标效果
.card-icon {
  width: 56px;
  height: 56px;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 12px;
  transition: all 0.3s ease;
}

.glass-icon {
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.3);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);

  &:hover {
    transform: scale(1.05);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.2);
  }
}

.blue-bg { background: linear-gradient(135deg, #409eff, #667eea); }
.green-bg { background: linear-gradient(135deg, #67c23a, #4facfe); }
.purple-bg { background: linear-gradient(135deg, #9c88ff, #a8edea); }
.orange-bg { background: linear-gradient(135deg, #f59e0b, #ff9a9e); }

.card-title {
  font-size: 16px;
  font-weight: 700;
  color: #2d3748;
  margin-bottom: 4px;
  line-height: 1.2;
}

.card-desc {
  font-size: 12px;
  color: #718096;
  line-height: 1.3;
}

// More按钮
.card-more {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 8px 16px;
  background: rgba(255, 255, 255, 0.6);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  border: 1px solid rgba(255, 255, 255, 0.4);
  margin: 12px;
  border-radius: 12px;
  transition: all 0.3s ease;
}

.more-text {
  font-size: 11px;
  font-weight: 600;
  color: #64748b;
  letter-spacing: 0.3px;
}

.action-card:hover .card-more {
  background: rgba(255, 255, 255, 0.8);
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

// 响应式
@media (max-width: 375px) {
  .actions-grid {
    gap: 12px;
  }
  
  .action-card {
    min-height: 120px;
  }
  
  .card-content {
    padding: 12px 16px 0;
  }
  
  .card-icon {
    width: 48px;
    height: 48px;
    margin-bottom: 10px;
  }
  
  .card-title {
    font-size: 15px;
  }
  
  .card-desc {
    font-size: 11px;
  }
  
  .card-more {
    margin: 8px;
    padding: 6px 12px;
  }
}
</style>